<template>
  <el-dialog
    class="dialog"
    :visible="_visible"
    :title="$t('alarmDetailTile')"
    :append-to-body="true"
    width="600px"
    :before-close="handleClose"
  >
    <div class="snapDetail-body d-flex jc-evenly ai-center">
      <div class="left d-flex flex-column jc-evenly ai-center">
        <!-- <div class="first-warn">
          <span v-show="isFirstWarnShow">{{ $t("first_warn") }}</span>
        </div> -->
        <MyImage class="img-box" :src="row.snap_path" />
        <!-- 轮播图 -->
        <!-- <div>{{ row.trigger }}</div> -->
        <!-- <el-carousel
          type="card"
          height="110px"
          :autoplay="false"
          indicator-position="none"
          arrow="always"
          @change="handleChangeCard"
        >
          <el-carousel-item v-for="(item, index) in row" :key="index">
            <MyImage :src="item.snap_path" width="100px" height="100px" />
          </el-carousel-item>
        </el-carousel> -->
      </div>
      <div class="right d-flex flex-column flex-1 jc-around ai-start">
        <div>
          <span>{{ $t("warnType") }}</span>
          <span>
            {{ (row.events_type || row.alarm_type) | formatEventsType }}</span
          >
        </div>
        <!-- 检测模式 -->
        <div v-show="row.events_attr.with_oiltanker">
          <span>{{ $t("detection_mode") }}</span>
          <span>{{ formatDetectionMode(row.events_attr.with_oiltanker) }}</span>
        </div>
        <!-- 在岗人数(人) -->
        <div v-show="row.events_attr.leave_num_threshold">
          <span>{{ $t("indoor.leave_num_threshold") }}</span>
          <span>{{ row.events_attr.leave_num_threshold }}</span>
        </div>
        <!-- 预警人数阈值 -->
        <div v-show="row.events_attr.leave_num_threshold">
          <span>{{ $t("crowd_threshold") }}</span>
          <span>{{ row.events_attr.crowd_threshold }}</span>
        </div>
        <!-- 热区人数 -->
        <div v-show="row.events_attr.crowd_num">
          <span>{{ $t("roiCrowdNum") }}</span>
          <span>{{ row.events_attr.crowd_num }}</span>
        </div>
        <!-- 越线方向 -->
        <div v-show="row.events_attr.over_boundary_direction">
          <span>{{ $t("over_boundary_direction") }}</span>
          <span>{{
            format_over_boundary_direction(
              row.events_attr.over_boundary_direction
            )
          }}</span>
        </div>
        <!-- 进入 -->
        <div v-show="row.in_title">
          <span>{{ $t("in_title") }}</span>
          <span>{{ row.in_title }}</span>
        </div>
        <!-- 离开 -->
        <div v-show="row.out_title">
          <span>{{ $t("out_title") }}</span>
          <span>{{ row.out_title }}</span>
        </div>
        <div>
          <span>{{ $t("channelName") }}</span>
          <span>{{ row.camera_name }}</span>
        </div>
        <!-- 报警状态 -->
        <div v-show="row.alarm_status">
          <span>{{ $t("warnStatus") }}</span>
          <span>{{ formatAlarmStatus(row.alarm_status) }}</span>
        </div>
        <div>
          <span>{{ $t("first_warnTime") }}</span>
          <span>{{ row.trigger }}</span>
        </div>
        <!-- 销警时间 -->
        <!-- <div v-show="row.events_type.includes('389')">
          <span>{{ $t("cancelAlarmTime") }}</span>
          <span>{{ lastInfo.trigger }}</span>
        </div> -->
      </div>
    </div>
  </el-dialog>
</template>
<script>
import MyImage from "@/components/Image.vue";
export default {
  components: {
    MyImage,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {
        return { events_attr: {} };
      },
    },
  },
  data() {
    return {
      isFirstWarnShow: true,
      isAddrShow: true,
      isIdShow: true,
      leave_with_oiltanker_list: [
        { label: this.$t("normal_mode"), value: false },
        { label: this.$t("oiltanker_mode"), value: true },
      ],
      curIndex: 0,
    };
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    // lastInfo() {
    //   return this.row[this.row.length - 1] || {};
    // },
  },
  methods: {
    handleChangeCard(index) {
      this.curIndex = index;
      this.isFirstWarnShow = index === 0;
    },
    handleClose(done) {
      this._visible = false;
      done();
    },
    getEncryptInfo(res, key, isShowKey) {
      if (res.data.record.length) {
        this.$set(this.record, key, res.data.record[0][key]);
      } else {
        this.$message.warning(this.$t("emptyData"));
      }
      this[isShowKey] = false;
    },
    formatDetectionMode(val) {
      if (typeof val !== "boolean") return "";
      return this.leave_with_oiltanker_list.find((item) => item.value === val)
        .label;
    },
    formatAlarmStatus(val) {
      if (typeof val !== "number") return "";
      const alarmMap = [
        { label: this.$t("warnType1"), value: 0 },
        { label: this.$t("warnType2"), value: 2 },
      ];
      return alarmMap.find((item) => item.value === val).label;
    },
    format_over_boundary_direction(val) {
      if (typeof val !== "number" || val == 0) return "";
      const over_boundary_direction_list = [
        { label: this.$t("A_B"), value: 1 },
        { label: this.$t("B_A"), value: 2 },
        { label: this.$t("AB_both"), value: 3 },
      ];
      return over_boundary_direction_list.find((item) => item.value === val)
        .label;
    },
  },
};
</script>
<style lang="less" scoped>
.dialog {
  z-index: 9999;
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 0;
  bottom: 0;
  margin: 0;
  /deep/ .el-dialog__header {
    background: #e6a23c;
  }
  .snapDetail-body {
    width: 100%;
    height: 270px;
    display: flex;
    justify-content: center;
    align-items: center;
    .left {
      /deep/ .el-carousel {
        width: 220px;
      }
      .first-warn {
        width: 100%;
        height: 25px;
        color: #fff;
        span {
          padding: 2px 5px;
          min-width: 80px;
          box-shadow: 0px 6px 12px 0px rgba(255, 136, 0, 0.101961);
          background-image: linear-gradient(
            315deg,
            rgba(255, 136, 0, 1) 0,
            rgba(252, 183, 80, 1) 100%
          );
          border-radius: 5px 5px 0 0;
        }
      }
    }
    .right {
      width: 100%;
      height: 100%;
      margin-left: 10px;
      .title {
        width: 100px;
        border-radius: 5px;
        background: #ccc;
        margin: 0 auto;
        text-align: center;
      }
      div {
        width: 100%;
        line-height: 20px;
        display: flex;
        justify-content: space-between;
        span:first-child {
          font-weight: bold;
        }
        span:last-child {
          text-align: right;
        }
      }
      .snap-info {
        height: 100%;
      }
      .lib_info {
        height: 100%;
      }
    }
  }
}
</style>
